<template>
	<div id="container">
		<div id="search_content">
			<el-form ref="search_form" label-width="120px">
				<el-form-item label="管理员姓名:">
					<el-input v-model="adminNameSearch">
						<template #prepend>
							<i class="el-icon-user" style="font-size: 20px;"></i>
						</template>
					</el-input>
				</el-form-item>
				<el-form-item label="管理员账号:">
					<el-input v-model="adminIdSearch">
						<template #prepend>
							<i class="el-icon-notebook-2" style="font-size: 20px;"></i>
						</template>
					</el-input>
				</el-form-item>
				<el-form-item label="管理员邮箱:">
					<el-input v-model="adminEmailSearch">
						<template #prepend>
							<i class="el-icon-eleme" style="font-size: 20px;"></i>
						</template>
					</el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="el-icon-search" v-on:click="search()">
						查询
					</el-button>
					<el-button type="danger" @click="deleteAll" :disabled="this.multipleSelection.length==0">批量删除</el-button>	
				</el-form-item>
			</el-form>
		</div>
		
		<div id="show_content">
			<div id="show_table">
				<el-table
				:data="admins"
				border
				style="width: 100%"
				@selection-change="handleSelectionChange"
				:header-cell-style="{textAlign: 'center'}"
				:cell-style="{ textAlign: 'center' }">
					<el-table-column
						type="selection"></el-table-column>
					<el-table-column
						label="管理员姓名"
						prop="adminName"></el-table-column>
					<el-table-column
						label="管理员账号"
						prop="adminId"></el-table-column>
					<el-table-column
						label="管理员邮箱"
						prop="adminEmail"></el-table-column>

					<el-table-column
						fixed="right"
						label="操作">
						<template #default="scope">
							<el-button type="primary" class="el-icon-delete" @click="del(scope.row)" >删除</el-button>
							<el-button type="primary" class="el-icon-setting" @click="dialogVisible = true">编辑</el-button>
							<el-dialog
							  title="管理员信息"
							  v-model="dialogVisible"
							  width="30%"
							  :before-close="handleClose">
							  <el-form ref="add_form" label-width="80px">
								  <el-form-item label="账号:">
										<el-input v-model="adminIdUpdate" placeholder="请输入账号,账号不可更改"></el-input>
									</el-form-item>
									<el-form-item label="姓名:">
										<el-input v-model="adminNameUpdate"></el-input>
									</el-form-item>
									<el-form-item label="邮箱:">
										<el-input v-model="adminEmailUpdate"></el-input>
									</el-form-item>
							  </el-form>
							  <template #footer>
							    <span class="dialog-footer">
							      <el-button @click="dialogVisible = false">取 消</el-button>
							      <el-button type="primary" @click="save">确 定</el-button>
							    </span>
							  </template>
							</el-dialog>
							
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div id="page_content">
				<el-pagination 
				background layout="prev,pager,next" 
				:total="pageTotle" 
				:page-size="pageSize"
				@current-change="pageData">
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		name:'userAdmin',
		data(){
			return{
				admin:{
					adminId:'',
					adminName:'',
					adminEmail:'',			
				},
				multipleSelection:[],
				adminNameSearch:'',
				adminIdSearch:'',
				adminEmailSearch:'',
				adminNameUpdate:'',
				adminIdUpdate:'',
				adminEmailUpdate:'',
				admins:[],
				pageNum:1,
				pageTotle:0,
				pageSize:4,
				dialogVisible:false
			}
		},
		methods:{
			init(){
				this.admin.pageNum=this.pageNum;
				this.admin.pageSize=this.pageSize;
				this.admin.adminName = this.adminNameSearch;
				this.admin.adminId=this.adminIdSearch;
				this.admin.adminEmail=this.adminEmailSearch;
				var param=this.$qs.stringify(this.admin);
				this.$axios
				.post("admin/findByParam",param)
				.then(rst=>{
					console.log(rst);
					this.admins=rst.data.list;
					this.pageTotle=rst.data.total;
				}).catch(ex=>{
					console.log(ex);
				});
			},
			search(){
				this.pageNum=1;
				this.init();
			},
			handleClose(done){
				this.$confirm('确认关闭？')
				    .then(_ => {
				        done();
				    })
				    .catch(_ => {});
			},
			save(){
				//根据账号修改(且账号不可更改)
				this.admin.adminName = this.adminNameUpdate;
				this.admin.adminEmail = this.adminEmailUpdate;
				this.admin.adminId = this.adminIdUpdate;
				if(this.admin.adminId){
					let data=this.$qs.stringify(this.admin);
					console.log(data);
					this.$axios.post("admin/update",data)
					.then(rst=>{
						if(rst){
							this.dialogVisible=false;
							this.init();
						}
					})
			    }
			},
			del(row){
			    this.$confirm('此操作将永久删除, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(()=>{
					let param={
						adminId : row.adminId
					}
					let data = this.$qs.stringify(param);
					console.log(data);
					this.$axios
					.post("admin/delete",data)
					.then(rst=>{
						if(rst){
							this.init();
						}
					})
				}).catch(()=>{
					this.$message({
						type:'info',
						message:'已取消删除'
					});
				});
			},
			handleSelectionChange(val){
				this.multipleSelection=val;
				console.log(this.multipleSelection)
			},
			deleteAll(){
				if(this.multipleSelection.length==0)
					this.$message.error('请至少选择一项')
				this.multipleSelection.forEach(element=>{
					this.admins.forEach((e,i)=>{
							this.admins.splice(i,1)
					});
				});
			},
			pageData(curr){
				this.pageNum=curr;
				this.init();
			}
		}
		
	}
</script>

<style>
</style>
